<template>
	<view class="cropper-wrap">
		<view class="cropper-box">
			<qf-image-cropper :src="imageSrc" :width="500" :height="500" :radius="30" @crop="handleCrop"></qf-image-cropper>
		</view>
		<view>
			<view style="width: 200rpx;height: 50rpx;background-color: red;" @click="crop" ></view>
			<image :src="cropUrl"  style="width: 200rpx;height: 200rpx;" ></image>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imageSrc:'',
				cropUrl:''
			}
		},
		onLoad:function(option){
			console.log(option.url)
			this.imageSrc = option.url;
		},
		methods:{
			handleCrop(e){
				uni.previewImage({
						urls: [e.tempFilePath],
						current: 0
				});
			}
		}
	}
</script>

<style lang="scss" scoped >
.cropper-wrap{
	width: 100vw;
	height: 100%;
	position: absolute;
	background-color: #222;
	.cropper-box{
		width: 100vw;
		height: 70%;
	}
}	
	
</style>